<style>
.aside{
  width:200px;
  height: 100%;
  display: inline-block;
  border: 1px solid #2c3e50;
}
.right{
  width: 900px;
  display: inline-block;
}

</style>
<template>
  <div style="height: 80vh;width:1100px;overflow: hidden;margin: 0 auto;display: flex">
    <div class="aside">
      <el-menu style="width:100%;height:100%;border: 1px black" active-text-color="#42b983" unique-opened router >
        <a href="http://localhost:9090/help" style="text-decoration: none ">
          <el-row :gutter="10" style="margin: 15px 0">
            <el-col :span="2"></el-col>
            <el-col :span="6">
              <el-icon size="25" style="color: #42b983;position: relative;top: 3px;"><Help /></el-icon>
            </el-col>
            <el-col :span="14">
              <span style="font-size: 20px;color: #42b983;letter-spacing: 4px;font-weight: bold" >帮助中心</span>
            </el-col>
            <el-col :span="2"></el-col>
          </el-row>
        </a>
        <el-sub-menu index="1" style="border-top: 1px solid gray">
          <template #title>
            <el-icon style="font-size: 21px"><UserFilled /></el-icon>
            <span>用户中心</span>
          </template>
          <el-menu-item index="/help/regHelp" @click="ViewVisible">注册登录</el-menu-item>
          <el-menu-item index="/help/protocol" @click="ViewVisible">注册协议</el-menu-item>
          <el-menu-item index="/help/privacy" @click="ViewVisible">隐私政策</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2" style="border-top: 1px solid gray">
          <template #title>
            <el-icon style="font-size: 21px"><Setting /></el-icon>
            <span>账户管理</span>
          </template>
          <el-menu-item index="/help/password" @click="ViewVisible">修改密码</el-menu-item>
          <el-menu-item index="/help/vip" @click="ViewVisible">会员升级</el-menu-item>
          <el-menu-item index="/help/pointMarket" @click="ViewVisible">积分商城</el-menu-item>
          <el-menu-item index="/help/unsubscribe" @click="ViewVisible">注销用户</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3" style="border-top: 1px solid gray">
          <template #title>
            <el-icon style="font-size: 21px"><Plus /></el-icon>
            <span>网络预定</span>
          </template>
          <el-menu-item index="/help/process" @click="ViewVisible">预定流程及规则</el-menu-item>
          <el-menu-item index="/help/order" @click="ViewVisible">订单操作流程</el-menu-item>
          <el-menu-item index="/help/invoice" @click="ViewVisible">电子发票</el-menu-item>
          <el-menu-item index="/help/restriction" @click="ViewVisible">限行政策</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4" style="border-top: 1px solid gray">
          <template #title>
            <el-icon style="font-size: 21px"><WarnTriangleFilled /></el-icon>
            <span>事故处理</span>
          </template>
          <el-menu-item index="/help/dispose" @click="ViewVisible">处理方式</el-menu-item>
          <el-menu-item index="/help/safeGuard" @click="ViewVisible">基本保障服务</el-menu-item>
          <el-menu-item index="/help/standBy" @click="ViewVisible">备用车使用</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5" style="border-top: 1px solid gray">
          <template #title>
            <el-icon style="font-size: 21px"><Money /></el-icon>
            <span>服务及费用结算</span>
          </template>
          <el-menu-item index="/help/cost" @click="ViewVisible">其他费用</el-menu-item>
          <el-menu-item index="/help/credit" @click="ViewVisible">信用额度</el-menu-item>
          <el-menu-item index="/help/contact" @click="ViewVisible">联系我们</el-menu-item>
        </el-sub-menu>
      </el-menu>




    </div>
    <div>
      <el-container>
        <el-header style="width: 900px">
          <el-row :gutter="10" style="margin: 0 auto">
            <el-col :span="4">
              <img src="/logo.png" alt="帮助中心">
            </el-col>
            <el-col :span="18">
              <el-form>
                <el-form-item>
                  <el-input placeholder="输入您要搜索的问题" style="border: #42b983 2px solid;width: 400px"></el-input>
                  <el-button style="background-color: #42b983;width: 100px;margin-left: 20px;color: white;font-weight: bolder" size="large">搜索帮助</el-button>
                </el-form-item>
                <el-form-item style="position: relative;top: -20px">
                  <span>热门搜索:</span>
                  <a v-for="search in HotSearch" :href="search.href" style="margin-left: 10px;text-decoration: none;color: black">{{search.label}}</a>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <div class="default" v-if="PageVisible">
            <h1>这是一个默认页面</h1>
          </div>
          <div class="view" v-else>
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
const PageVisible=ref(true);
const ViewVisible=()=>{
  PageVisible.value=false;
};
const HotSearch=ref([
  {href:"http://localhost:9090/help/regHelp",label:"注册"},
  {href:"http://localhost:9090/help/password",label:"忘记密码"},
  {href:"http://localhost:9090/help/process",label:"预定"},
  {href:"http://localhost:9090/help/pointMarket",label:"积分"}
])
</script>
